<template>
  <view class="school-wrap">
    <back :back-title="backTitle"></back>
    <search></search>
    <mescroll-uni :top="220" :bottom="0" :down="downOption" @down="pullRefresh" :up="upOption" @up="pullUp">
      <view class="list">
				<view v-for="(item, index) of dataList" :key="item.newsId" class="item" @click="handleDetail(item)">
					<view class="title">校园通知</view>
					<view class="time">{{item.newsCreateTime}}</view>
					<view class="info-wrap">
						<view v-if="index % 3 === 0" class="one info">
							<image :src="item.newsMainImage" mode="aspectFill" class="bgc-image"/>
							<view class="info-title">{{item.newsTitle}}</view>
						</view>
						<view v-if="index % 3 === 1" class="two info">
							<image :src="item.newsMainImage" mode="aspectFill" class="bgc-image"/>
							<view class="info-title">{{item.newsTitle}}</view>
						</view>
						<view v-if="index % 3 === 2" class="three info">
							<view class="left">
								<view class="title">{{item.newsTitle}}</view>
								<view class="desc">{{item.newsSecondTitleFix}}</view>
							</view>
							<view class="right">
								<image :src="item.newsMainImage" class="right-image" mode="aspectFill"/>
							</view>
						</view>
					</view>
				</view>
			</view>
    </mescroll-uni>
  </view>
</template>

<script>
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
import {infoList, infoDetail} from '../../api/school'
import {parseTime} from '../../utils'
export default {
  name: 'school',
  components: {
    MescrollUni
  },
  data() {
    return {
      backTitle: '校园信息',
      downOption: {
        use: true, // 是否启用下拉刷新; 默认true
				auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
      },
      upOption: {
        auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
        empty: {
					tip: '暂无相关数据',
					icon: '/static/images/common/404.png'
        }
      },
			dataList: []
    }
  },
  methods: {
     // 上拉
    async pullUp(mescroll) {
			const {schoolId} = JSON.parse(uni.getStorageSync('USER_INFO'))
      let currentPage = mescroll.num; // 页码, 默认从1开始
      let showCount = mescroll.size; // 页长, 默认每页10条
      const res = await infoList({currentPage,showCount,schoolId})
			let curPageData = res.list
			console.log(curPageData)
      let totalSize = res.total;
			const newCurPageData = curPageData.map((item) => {
				const time = parseTime(item.newsCreateTime/1000)
        item.newsCreateTime = `${time.substring(0,10)}`
				item.newsSecondTitleFix = `${item.newsSecondTitle.substring(0,32)}...`
				return item
			})
			mescroll.endBySize(curPageData.length, totalSize);
      if(mescroll.num == 1) this.dataList = []; //如果是第一页需手动置空列表
      this.dataList = this.dataList.concat(newCurPageData)
    },
    // 刷新
    pullRefresh(mescroll) {
      mescroll.resetUpScroll();
    },
    handleDetail (item) {
			const options = {
				title: item.newsTitle,
				time: item.newsCreateTime,
				content: escape(item.newsContent)
			}
      uni.navigateTo({
        url: `/pages/scholl-info/detail/index?params=${JSON.stringify(options)}`
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.school-wrap{
  width: 100%;
  min-height: 100vh;
	.list{
		width: 100%;
		padding: 34upx 20upx 20upx;
		box-sizing: border-box;
		.item{
			width: 100%;
			padding-bottom: 34upx;
			box-sizing: border-box;
			.title{
				line-height: 42upx;
				font-size: 30upx;
				color: #333;
			}
			.time{
				line-height: 32upx;
				font-size: 20upx;
				color: #999;
				margin-bottom: 12upx;
			}
			.info {
				border-radius:10upx;
				width: 100%;
				position: relative;
				.bgc-image{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border-radius:10upx;
				}
				.info-title{
					position: absolute;
				}
			}
			.one{
				height:434upx;
				.info-title{
					font-size: 42upx;
					line-height: 60upx;
					color:#fff;
					font-weight: bold;
					width: 500upx;
					top: 40upx;
					left: 45upx;
				}
			}
			.two {
				height:163upx;
				.info-title{
					width: 453upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					top: 110upx;
					left: 45upx;
					font-size:30upx;
					line-height: 35upx;
					color: #fff;
				}
			}
			.three {
				height: 163upx;
				overflow: hidden;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background:rgba(255,255,255,1);
				border-radius:10upx;
				box-shadow: 0 0 4upx 4upx rgba(0,0,0,0.2);
				padding: 4upx 44upx 20upx;
				box-sizing: border-box;
				.right{
					width:124upx;
					height:124upx;
					background:rgba(255,200,36,1);
					border-radius:50%;
					justify-content: center;
					align-items: center;
					display: flex;
					.right-image{
						width:88upx;
						height:96upx;
						/* border-radius:50%; */
					}
				}
				.left{
					flex: 1;
					min-width: 0;
					.title {
						width: 100%;
						font-size:30upx;
						color:#333333;
						line-height: 62upx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
					.desc{
						font-size:25upx;
						line-height: 31upx;
						color: #999;
					}
				}
				.info-title{
					width: 453upx;
					color: #fff;
				}
			}
		}
	}
}
</style>